<template>
  <div>
    <div
      class="w-full h-10 text-lg m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white"
    >
      <div
        @click="active = 0"
        :class="active === 0 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
      >
        添加收款
      </div>
      <div
        @click="active = 1"
        :class="active === 1 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
      >
        申请提现
      </div>
    </div>

    <div v-if="active == 0">
      <div class="w-full my-3 flex justify-center">
        <button
          @click="showAddInfoModal = true"
          class="block border-2 rounded-md py-1 px-4 mx-4 border-white text-xl font-bold bg-yellow-400"
        >
          + 添加提现信息
        </button>
      </div>

      <van-list
        class="p-1"
        :loading="loading"
        :finished-text="'没有更多了'"
        :finished="finished"
        @load="onLoad"
      >
        <div
          v-for="item in datas"
          :key="item.id"
          class="mb-1 p-2 flex justify-between rounded bg-white"
        >
          <div class="flex-1 space-y-1">
            <div>收款类型：{{ types[item.type] }}</div>
            <div>收款姓名：{{ item.name }}</div>
            <div>收款账号/币址：{{ item.card }}</div>
            <div v-if="item.type == 2">银行名称：{{ bankList[item.bankId] }}</div>
            <div>添加时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD hh:mm:ss') }}</div>
          </div>
          <div class="flex flex-col space-y-2 items-center justify-center">
            <button @click="EditItem(item)" class="bg-blue-400 px-3 rounded-lg text-white">
              编辑
            </button>
            <button @click="DeleteItem(item.id)" class="bg-red-400 px-3 rounded-lg text-white">
              删除
            </button>
          </div>
        </div>
      </van-list>
    </div>

    <div v-if="active == 1">
      <div
        class="w-full h-10 m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white"
      >
        <div
          @click="status = 0"
          :class="status === 0 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
        >
          等待审核
        </div>
        <div
          @click="status = 1"
          :class="status === 1 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
        >
          审核中
        </div>
        <div
          @click="status = 2"
          :class="status === 2 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
        >
          审核成功
        </div>
        <div
          @click="status = 3"
          :class="status === 3 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
        >
          审核失败
        </div>
        <div
          @click="status = 4"
          :class="status === 4 ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
        >
          取消提现
        </div>
      </div>
      <div class="w-full my-3 flex justify-center">
        <button
          @click="showAddModal = true"
          class="block border-2 rounded-md py-1 px-4 mx-4 border-white text-xl font-bold bg-yellow-400"
        >
          + 申请提现
        </button>
      </div>

      <WithdrawalList ref="WithdrawalListObj" :status="status" />
    </div>
  </div>

  <AddModal v-model:show-modal="showAddModal" @ok="WithdrawalListObj.reLoad()" />
  <AddInfoModal v-model:show-modal="showAddInfoModal" @ok="reLoad" />
  <EditInfoModal v-model:show-modal="showEditInfoModal" @ok="reLoad" :item="_item" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { GetBankListApi, GetPaymentListApi, DeleteCodeApi } from '@/apis/withdrawal'
import AddModal from './modal/addModal.vue'
import EditInfoModal from './modal/editInfoModal.vue'
import AddInfoModal from './modal/addInfoModal.vue'
import WithdrawalList from './components/withdrawalList.vue'

import dayjs from 'dayjs'
const status = ref(0)
const active = ref(0)
const showAddModal = ref(false)
const showAddInfoModal = ref(false)
const loading = ref(false)
const finished = ref(false)

const showEditInfoModal = ref(false)
const _item = ref({})

const WithdrawalListObj = ref()

const page = ref(1)

const datas = ref([])
const types = ['微信', '支付宝', '银行卡', 'USDT-TR20']
const bankList = ref({})

onMounted(() => {
  GetBankListApi().then((res) => {
    const { list } = res
    bankList.value = list
  })
})

function onLoad() {
  loading.value = true
  GetPaymentListApi({
    page: page.value
  })
    .then((res) => {
      const { list } = res
      if (list.length > 0) {
        datas.value = [...datas.value, ...list]
        page.value++
      } else {
        finished.value = true
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function reLoad() {
  page.value = 1
  datas.value = []
  onLoad()
}

function EditItem(item) {
  _item.value = item
  showEditInfoModal.value = true
}

function DeleteItem(id) {
  DeleteCodeApi({ ids: [id] }).then(() => {
    reLoad()
  })
}
</script>
